<script setup lang="ts">
import { ref, onMounted } from "vue";
import { DetailFormProps } from "../utils/types";

const props = withDefaults(defineProps<DetailFormProps>(), {
  formInline: () => ({
    showType: 1,
    idList: [],
    collapseList: [],
    storeOptions: [],
    depositoryOptions: [],
    supplierOptions: []
  })
});

const newFormInline = ref(props.formInline);
</script>

<template>
  <div class="detail-box">
    <el-collapse
      v-if="newFormInline.showType == 1"
      v-model="newFormInline.collapseList"
      class="dcollapse"
    >
      <el-collapse-item
        v-for="item in newFormInline.storeOptions"
        :key="item.id"
        :title="item.label"
        :name="item.id"
      >
        <div class="pl-[20px]">
          <el-checkbox-group v-model="newFormInline.idList" class="d-checkbox">
            <el-checkbox
              v-for="items in item.children"
              :key="items.id"
              :label="items.label"
              :value="items.id"
              disabled
            />
          </el-checkbox-group>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-checkbox-group
      v-else-if="newFormInline.showType == 2"
      v-model="newFormInline.idList"
      class="d-checkbox"
    >
      <el-checkbox
        v-for="items in newFormInline.depositoryOptions"
        :key="items.id"
        :label="items.depositoryName"
        :value="items.id"
        disabled
      />
    </el-checkbox-group>
    <el-checkbox-group v-else v-model="newFormInline.idList" class="d-checkbox">
      <el-checkbox
        v-for="items in newFormInline.supplierOptions"
        :key="items.id"
        :label="items.supplierName"
        :value="items.id"
        disabled
      />
    </el-checkbox-group>
  </div>
</template>
<style lang="scss" scoped>
.detail-box {
  min-height: 380px;
  padding: 0 20px;
  margin-bottom: 30px;
}
.dcollapse {
  border-top: none;
}
:deep(.dcollapse .el-collapse-item__content) {
  padding-bottom: 15px;
}
:deep(
    .d-checkbox .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner
  ) {
  background-color: var(--el-checkbox-checked-bg-color);
  border-color: var(--el-checkbox-checked-input-border-color);
}
:deep(.d-checkbox .el-checkbox__input.is-checked .el-checkbox__inner:after) {
  border-color: var(--el-checkbox-checked-icon-color);
}
</style>
